<template>
  <div class="category-container">
    <el-row class="search-box-row">
      <el-col :span="20">
        <el-input size="medium" placeholder="搜索书名、作者、ISBN或关键词..." v-model="name" class="search-input" clearable></el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" class="search-btn" @click="load">
          <i class="el-icon-search mr-2"></i>搜索
        </el-button>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="24">
        <!-- 分类按钮区域：增加标题+标签间距，优化选中视觉 -->
        <div class="category-container-content">

          <div class="hot-tags">
            <el-tag type="primary" class="search-tag" :class="{ 'tag-selected': selectedCategoryId === 0 }" @click="handleAllClick">
              全部
            </el-tag>
            <!-- 分类标签：修复循环参数错误（原item改为category） -->
            <el-tag
                v-for="category in categories"
                :key="category.id"
            class="search-tag"
            :class="{ 'tag-selected': selectedCategoryId === category.id }"
            type="primary"
            @click="handleCategoryClick(category)"
            >
            {{ category.name }}
            </el-tag>
          </div>
        </div>

        <!-- 内容主体：优化卡片间距、阴影过渡，增加空状态美感 -->
        <div class="category-container-content" v-if="articles.length > 0">
          <el-row :gutter="20" class="books-grid"> <!-- 增加间距，避免拥挤 -->
            <el-col :span="6" v-for="(item, index) in articles" :key="index">
              <el-card class="book-card" :body-style="{ padding: '0' }">
                <!-- 封面区域：优化图片加载、标签层级 -->
                <div class="book-img-container">
                  <img
                      :src="item.cover"
                  alt="书籍封面"
                  class="book-img"
                  >
                </div>
                <!-- 信息区域：优化文字排版、间距 -->
                <div class="book-info">
                  <h3 class="book-title">{{ item.name }}</h3>
                  <p class="book-author">
                    {{ item.desc }}
                  </p>
                  <div class="book-publisher">
                    <span class="publisher-info">作者：{{ item.author || '未知作者' }}</span>
                  </div>
                  <div class="book-actions">
                    <el-tag type="success" class="status-tag">可借阅</el-tag>
                    <el-button type="primary" size="mini" @click="goDetail(item.id)">详情</el-button>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <!-- 分页：优化居中对齐，增加上下间距 -->
          <div class="pagination-container">
            <el-pagination
                background
                layout="total, prev, pager, next"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-size="pageSize"
                :total="total"
            ></el-pagination>
          </div>
        </div>
        <!-- 空状态：优化卡片样式，增加上下间距 -->
        <div class="category-container-content empty-container" v-else>
          <el-empty :image-size="400" :image="require('@/assets/empty.svg')" description="此分类下还未发布内容哟~"></el-empty>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'CategoryPage',  // 修正组件名，避免与App冲突
  data() {
    return {
      articles: [{ cover: '', tagList: [], desc: '' }],
      categories: [],  // 示例分类
      total: 0,
      pageNum: 1,
      pageSize: 8,
      tagMap: {},
      selectedCategoryId: this.$route.query.selectedCategoryId || 0,  // 默认选中“全部”
      advertisements: [],
      name: this.$route.query.name || ''
    }
  },
  created() {
    this.loadCategory()
  },
  methods: {
    // 新增“全部”标签点击事件
    handleAllClick() {
      this.selectedCategoryId = 0
      this.pageNum = 1
      this.$router.push('/front/category?selectedCategoryId=0')
      this.load()
    },
    // 修复参数错误（原item改为category）
    handleCategoryClick(category) {
      this.selectedCategoryId = category.id
      this.pageNum = 1
      this.$router.push('/front/category?selectedCategoryId=' + category.id)
      this.load()
    },
    loadCategory() {
      this.$request.get("/category").then(res => {
        this.categories = res.data || []
        if (this.categories.length > 0) {
          const routeCatId = Number(this.$route.query.selectedCategoryId);
          const isValidRouteId = !isNaN(routeCatId);
          this.selectedCategoryId = isValidRouteId ? routeCatId : 0;
          this.load();
        }
        this.load()
      })
    },
    load() {
      console.log(this.selectedCategoryId)
      // 传递分类ID参数（全部时传空或特定标识）
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        categoryId: this.selectedCategoryId,
        name: this.name
      }
      this.$request.get("/book/page/front", { params }).then(res => {
        this.articles = res.data?.records || []
        this.total = res.data?.total || 0
      })
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.load()
    },
    // 新增详情跳转方法（避免直接用location.href）
    goDetail(bookId) {
      this.$router.push(`/front/bookDetail?id=${bookId}`)
    },
  }
}
</script>

<style scoped>
/* 基础布局：优化响应式，在小屏幕下宽度自适应 */
.category-container {
  width: 90%;
  max-width: 1200px;  /* 限制最大宽度，避免大屏拉伸 */
  margin: 0 auto;
  min-height: 90vh;
  padding: 20px 0;  /* 增加上下内边距，避免贴边 */
}

/* 内容区块：统一间距 */
.category-container-content {
  margin: 20px 0;
  padding: 0 4px;
}

/* 分类头部：增加视觉引导 */
.category-header {
  display: flex;
  align-items: center;
  text-align: center;
  margin-bottom: 16px;
  color: #303133;
}
.category-header i {
  font-size: 18px;
  color: #409eff;
  margin-right: 8px;
}
.header-title {
  font-size: 18px;
  font-weight: 500;
}

/* 标签区域：优化换行、间距、选中效果 */
.hot-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;  /* 增加标签间距 */
  padding: 0 4px;
  margin-bottom: 24px;
}

.search-box-row {
  width: 900px;
  margin: 0 auto 10px auto;
}

.search-input {
  height: 38px;
  border-radius: 24px 0 0 24px;
  border: none;
  padding: 0 5px;
}

.search-btn {
  height: 37px;
  width: 100%;
  background-color: #67C23A;
  border-color: #67C23A;
}

.search-btn:hover {
  background-color: #88cc66 !important;      /* 基础背景色 */
  border-color: #88cc66 !important;          /* 去掉默认边框 */
}

/* 标签基础样式：统一配色，增加hover过渡 */
.search-tag {
  background-color: #f5f7fa;
  color: #606266;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
}
.search-tag:hover {
  color: #67C23A;
  transform: translateY(-2px);  /* 优化上浮效果 */
}

/* 标签选中样式：强化视觉区分 */
.tag-selected {
  background-color: #67C23A !important;  /* 主色背景 */
  color: #fff !important;
}
.tag-selected:hover {
  background-color: #67C23A !important;  /* hover加深主色 */
  transform: translateY(-2px);
}

/* 书籍网格：优化响应式，小屏幕下调整列数 */
.books-grid {
  margin-bottom: 32px;
}
@media (max-width: 992px) {
  .books-grid .el-col {
    flex: 0 0 50%;  /* 平板：2列 */
    max-width: 50%;
  }
}
@media (max-width: 576px) {
  .books-grid .el-col {
    flex: 0 0 100%;  /* 手机：1列 */
    max-width: 100%;
  }
}

/* 书籍卡片：优化阴影、圆角，增加hover层次感 */
.book-card {
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  margin-top: 8px;
  border: 1px solid #f0f2f5;  /* 增加细边框，避免单调 */
}
.book-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);  /* 加深阴影，增强立体感 */
  transform: translateY(-4px);  /* 加大上浮幅度 */
}

/* 书籍封面：优化比例、过渡 */
.book-img-container {
  position: relative;
  height: 220px;  /* 增加高度，优化封面展示 */
  overflow: hidden;
  background-color: #fafafa;  /* 加载时背景色 */
}
.book-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.book-card:hover .book-img {
  transform: scale(1.08);  /* 加大缩放比例，更有动感 */
}

/* 新书标签：优化位置、样式 */
.new-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background-color: #f97316;
  color: #fff;
  border: none;
  z-index: 1;  /* 确保在封面之上 */
  padding: 4px 8px;
  font-size: 12px;
}

/* 书籍信息：优化文字排版、间距 */
.book-info {
  padding: 18px;
}
.book-title {
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #303133;
}
.book-author {
  font-size: 13px;
  color: #606266;
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;  /* 限制2行，避免文字过长 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
}
.book-publisher {
  display: flex;
  justify-content: flex-start;  /* 左对齐，更符合阅读习惯 */
  font-size: 12px;
  color: #909399;
  margin-bottom: 16px;
}

/* 操作区：优化按钮间距 */
.book-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.status-tag {
  padding: 3px 8px;
  height: auto;
  line-height: 1;
  font-size: 12px;
}
.book-actions .el-button {
  padding: 4px 12px;
  font-size: 12px;
}

/* 分页：优化居中、间距 */
.pagination-container {
  text-align: center;
  margin: 40px 0 20px;
}
.pagination-container .el-pagination {
  display: inline-block;
}

/* 空状态：优化样式，增加引导 */
.empty-container {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}

</style>
